<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<%@ include file="/common/jsp/bootstrap.jsp" %>
<!-- 写这个后台界面的用户自己添加的样式 -->
<link href="${ctx}/assets/css/style.css" rel="stylesheet">
<link href="${ctx}/assets/css/style-responsive.css" rel="stylesheet">

<title>登陆页面</title>
</head>
<body>
 <div id="login-page">
	  	<div class="container">
		      <form class="form-login" action="${ctx}/login.do" method="post">
		        <h2 class="form-login-heading">登陆</h2>
		        <div class="login-wrap">
		            <input type="text" name="username" class="form-control" placeholder="用户名" autofocus>
		            <br>
		            <input type="password" name="password" class="form-control" placeholder="密码">
		            <input type="checkbox" name="rememberMe" value="记住密码！">   
		            <label class="checkbox">
		                <span class="pull-right">
		                    <a data-toggle="modal" href="login.html#myModal">忘记密码?</a>
		                </span>
		            </label>
		            <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i>登陆</button>
		            <hr>
		            
		            <div class="login-social-link centered">
		            <p>其他登陆方式</p>
		                <button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>
		                <button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>
		            </div>
		            <div class="registration">
		                	是否有账号?<br/>
		                <a class="" href="#">
		                    	创建一个账号
		                </a>
		            </div>
		
		        </div>
		
		          <!-- Modal 修改密码弹出层-->
		          <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
		              <div class="modal-dialog">
		                  <div class="modal-content">
		                      <div class="modal-header">
		                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                          <h4 class="modal-title">忘记密码?</h4>
		                      </div>
		                      <div class="modal-body">
		                          <p>输入您的电子邮件地址重新设置您的密码。</p>
		                          <input type="text" name="email" placeholder="邮箱" autocomplete="off" class="form-control placeholder-no-fix">
		                      </div>
		                      <div class="modal-footer">
		                          <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
		                          <button class="btn btn-theme" type="button">提交</button>
		                      </div>
		                  </div>
		              </div>
		          </div>
		          <!-- modal -->
		      </form>	  	
	  	</div>
	  </div>
	  
	   <!-- 动态设置背景图片 -->
       <script type="text/javascript" src="${ctx}/assets/js/jquery.backstretch.min.js"></script>
	   <script>
	        $.backstretch("${ctx}/assets/img/login-bg.jpg", {speed: 500});
	    </script>
</body>
</html>